<template>
  <div>
    <h1>我是首页</h1>
    <button @click="goMy">go 我的</button>
    <button @click="goSearch">go search 测试replace</button>
    <button @click="goBack">test Back</button>
    <button @click="goForward">test forwark</button>
  </div>
</template>

<script>
export default {
  props: ["info"],
  mounted() {
    console.log(this.$router);
    // history go forward back push replace
  },
  methods: {
    goMy() {
      // 编程式路由导航
      // 点击当前按钮可以跳转页面 可以回退到当前的路由界面
      // this.$router.push("/my");
      // this.$router.push({ name: "my" });
      this.$router.push({ path: "/my" });
    },
    goSearch() {
      // 点击当前按钮可以跳转页面 不可以回退到当前路由界面
      // this.$router.replace("/search");
      this.$router.replace({ name: "search" });
    },
    goBack() {
      // 返回上一次历史记录
      // this.$router.back();
      this.$router.go(-1);
      // go正数代表下一个，负数代表上一个
    },
    goForward() {
      // 返回下一次历史记录
      this.$router.forward();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>